<template>
    <div class="inform">
      <router-link to="/comment">
        <span @mouseover="flow()" @mouseleave="flowout()" @click="click1()"><a href=""><i class="iconfont">&#xe660;</i>通知</a><i class="circleinfo" v-if
        ="this.comments + this.likes + this.fans + this.letters">{{this.comments + this.likes + this.fans + this.letters}}</i></span>
      </router-link>
        
        <div v-show="show" class="flowout" @mouseover="flow()" @mouseleave="flowout()">

          <router-link to="/comment">
            <p @click="click1()"><a href=""><i class="iconfont">&#xe6bc;</i>评论</a><span class="circle" ref="circle1" v-show="this.comments">{{this.comments}}</span></p>
          </router-link>
          <router-link to="/click">
            <p @click="click2()"><a href=""><i class="iconfont">&#xe677;</i>喜欢</a><span class="circle" ref="circle2" v-show="this.likes">{{this.likes}}</span></p>
          </router-link>
          <router-link to="/focus">
            <p @click="click3()"><a href=""><i class="iconfont">&#xe63f;</i>粉丝</a><span class="circle" ref="circle3" v-show="this.fans">{{this.fans}}</span></p>
          </router-link>
          <router-link to="/letter">
            <p @click="click4()"><a href=""><i class="iconfont">&#xe637;</i>私信</a><span class="circle" ref="circle4" v-show="this.letters">{{this.letters}}</span></p>
          </router-link>
          
        </div>
    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
export default {
  name: 'inform',
  data() {
    return {
      show:false,
      comments: '',
      likes: '',
      fans: '',
      letters: '',
    }
  },

  methods: {
    flow() {
      this.show = true
    },
    flowout() {
      this.show = false
    },
    click1() {
      this.$refs.circle1.style.display = "none"
      this.comments = 0
    },
    click2() {
      this.$refs.circle2.style.display = "none"
      this.likes = 0
    },
    click3() {
      this.$refs.circle3.style.display = "none"
      this.fans = 0
    },
    click4() {
      this.$refs.circle4.style.display = "none"
      this.letters = 0
    },
  },

  created () {
    axios.post(`/api/commentCount`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

      if (response.status === 200) {
        this.comments = response.data
        // console.log(this.comments)
      } 

    }) 

    axios.post(`/api/likeNoticeCount`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

      if (response.status === 200) {
        this.likes = response.data
        // console.log(this.likes)
      } 

    })

    axios.post(`/api/attentionNoticeCount`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

      if (response.status === 200) {
        this.fans = response.data
        // console.log(this.fans)
      } 

    })

    axios.post(`/api/UnReadCount`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

      if (response.status === 200) {
        this.letters = response.data
        // console.log(this.letters)
      } 

    })

  },
}
</script>

<style lang="stylus" scoped>
.inform
  display inline-block
  position fixed
  width 22% 
  margin-left 67%
  margin-bottom 0
  height 4rem 
  // background-color red
  a:hover
    color #FFD700
  span 
    display inline-block
    width 24%
    line-height 2rem
    margin-left 10%
    margin-top 2rem
    text-align center
    // background-color #fff
    .iconfont 
      color #FFD700
    .circleinfo
      padding .1rem .1rem
      border-radius 25px
      margin-left .3rem
      font-size .8rem
      color #fff
      background-color red
  .flowout
    width 30%
    height auto
    margin-left 3%
    font-size .9rem
    border 1px #ccc solid
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    p
    line-height 3rem
    padding-left 1rem
    background-color #fff
    .circle
      line-height 1rem
      padding .15rem 0rem
      border-radius 50%
      font-size .8rem
      color #fff
      background-color red
</style>
